<template>
  <el-card class="card-view" :style="{
    backgroundColor: randomColor(),
  }">
    <div>
      <el-row type="flex" justify="space-around" style="padding:10px">
        <el-col :span="24">
          <div class="card-content">
            <div class="card-content-label">形势分析</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- shadow="always" -->
    <el-select v-model="selectedRegion" placeholder="请选择辖区">
      <el-option v-for="item in regions" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select><el-button @click="drawLine">确定</el-button>
    <el-row>
      <el-col>
        <div id="myChart" style="width:600px;height: 450px;"></div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { request } from '@/api/service'
export default {
  sort: 6,
  title: '形势分析',
  name: 'trend',
  icon: 'el-icon-s-data',
  description: '按年度统计',
  height: 28,
  width: 20,
  isResizable: true,
  props: {
    industry: String,
  },
  data() {
    this.myChart = null
    return {
      trend: {},
      radio: '7',
      total: {},
      regions: [],
      selectedRegion: '厦门市'
    }
  },
  watch:{
    regions(){
      this.drawLine()
    }
  },
  methods: {
    initGet() {
      request({
        url: '/api/risk/apppoint',
        params: { "industry": this.industry }
      }).then((res) => {
        this.trend = res.data.trend// 这里是trend
        // 初始化regions
        var ls = []
        for (var region in this.trend) {
          var obj = { label: region, value: region }
          ls.push(obj)
        }
        this.regions = ls
      })
    },
    // 生成一个随机整数
    randomColor() {
      const color = ['#fffff']
      const ran = Math.floor(Math.random() * 4)
      return color[ran]
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      // 绘制图表
      //const xAxisData = this.trend.map(item => item.day)
      //const seriesData = this.trend.map(item => item.count)\

      console.log('this.selected', this.selectedRegion)
      const yearsData = this.trend[this.selectedRegion] // Object
      var xData = []
      var yData = []
      for (var key in yearsData) {
        xData.push(key)
        yData.push(yearsData[key])
      }

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 15
          }
        ],
        series: [
          {
            name: '平均分',
            type: 'line',
            barWidth: '60%',
            data: yData
          }
        ]
      };

      this.myChart.setOption(option)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('myChart'))
    this.initGet()
    //this.drawLine()
  }
}
</script>

<style scoped lang="scss">
.card-view {
  //border-radius: 10px;
  color: $color-primary;
}

.el-card {
  height: 100%;
}

::v-deep .el-card__body {
  width: 100%;
  height: 100%;
}

.el-radio-button__inner {
  border-radius: 20px;
}
</style>
